<template>
	<view class="teamDetails">
		<view class="headerInfo">
			<view class="referee">
				邀请人：
				<image :src="detail.dataInfo.refereeAvatar" mode=""></image>
				<text class="option">{{ detail.dataInfo.refereeRealName }}</text>
				<text>{{ detail.dataInfo.refereeId }}</text>
			</view>
			<view class="info">
				<view class="userInfo">
					<view class="imageWrap">
						<image :src="detail.dataInfo.avatar" mode=""></image>
						<view class="identityDetail" v-if="detail.dataInfo.identity == 1">店长</view>
					</view>
					<view class="detailWrap">
						<view class="nickName" style="margin: 0 0 24rpx" v-if="!detail.dataInfo.realName || detail.dataInfo.realName == ''">{{ detail.dataInfo.nickName }}</view>
						<view class="identity">
							<view class="identityName">
								<view class="name">{{ detail.dataInfo.realName }}</view>
								<view class="age">{{ detail.dataInfo.sex == 0 ? "女" : "男" }} | {{ detail.dataInfo.age }}岁</view>
							</view>
							<view class="page" v-if="detail.info.status == 1">
								<view @click="toPetHomeUrl">查看主页</view>
								<uni-icons type="right" size="16" color="#FF6084"></uni-icons>
							</view>
						</view>
						<view class="nickName" v-if="detail.dataInfo.realName && detail.dataInfo.realName != ''">
							{{ detail.dataInfo.nickName }}
						</view>
						<view class="userId">ID:{{ detail.dataInfo.id }}</view>
						<view class="commonItem m34">
							<view class="commonLabel">
								<image src="https://xjs-oss-prod.oss-cn-shenzhen.aliyuncs.com/xjs-static/icon-69.png" mode=""></image>
								<view class="text">{{ detail.dataInfo.phone }}</view>
							</view>
							<view class="copy" @click="copy('phone')">复制</view>
						</view>
						<view class="commonItem" v-if="detail.dataInfo.wxNumber">
							<view class="commonLabel">
								<image src="https://xjs-oss-prod.oss-cn-shenzhen.aliyuncs.com/xjs-static/icon-95.png" mode=""></image>
								<view class="text">{{ detail.dataInfo.wxNumber }}</view>
							</view>
							<view class="copy" @click="copy('wexin')">复制</view>
						</view>
					</view>
				</view>
			</view>
			<view class="service" v-if="detail.info.status == 1 && detail.dataInfo.serviceType != '' && detail.dataInfo.province && detail.dataInfo.orderTakingRange != '0'">
				<view class="serviceItem" v-if="detail.dataInfo.serviceType && detail.dataInfo.serviceType != ''">
					<view class="serviceLabel">提供服务：</view>
					<view class="serviceVal" style="display: flex; align-items: center">
						<view class="serviceOption" v-for="(serIitem, serIindex) in filterServiceType(item)" :key="serIindex">
							{{ filterPetService(serIitem) }}
						</view>
					</view>
				</view>
				<view class="serviceItem">
					<view class="serviceLabel">接单地址：</view>
					<view class="serviceVal">
						{{ detail.dataInfo.province }}{{ detail.dataInfo.city }}{{ detail.dataInfo.area }}{{ detail.dataInfo.locationAddress }}{{ detail.dataInfo.address }}
					</view>
				</view>
				<view class="serviceItem">
					<view class="serviceLabel">接单范围：</view>
					<view class="serviceVal">{{ detail.dataInfo.orderTakingRange }}KM</view>
				</view>
			</view>
		</view>
		<view class="box mt24" v-if="detail.info.status != 2">
			<view class="title">收入分成（{{ detail.revenueSharing.ratioFlag == "0" ? "目前是默认分成" : "目前是个性化分成" }}）</view>
			<view class="boxWrap" @tap="incomeSetUp">
				<view class="mall_box">
					<view class="xjs-weight-bold xjs-size-32 xjs-mt-32 ml-22 linehei1">{{ handleIncome(detail.dataInfo.mallPromotionRatio) }}%</view>
					<view class="mt24 color_text ml-22">线上商城</view>
					<view class="color_text ml-22">推广收入</view>
				</view>
				<view class="service_box mlr-11">
					<view class="xjs-weight-bold xjs-size-32 xjs-mt-32 ml-22 linehei1">{{ handleIncome(detail.dataInfo.serviceAcceptanceRatio) }}%</view>
					<view class="mt24 color_text ml-22">服务订单</view>
					<view class="color_text ml-22">接单收入</view>
				</view>
				<view class="service_box">
					<view class="xjs-weight-bold xjs-size-32 xjs-mt-32 ml-22 linehei1">{{ handleIncome(detail.dataInfo.servicePromotionRatio) }}%</view>
					<view class="mt24 color_text ml-22">服务订单</view>
					<view class="color_text ml-22">推广收入</view>
				</view>
			</view>
		</view>
		<view class="box mt24" v-if="detail.info.status != 2">
			<view class="title">个人收入</view>
			<view class="boxWrapMoneyTop" @tap="personalIncomeStatement">
				<view class="boxItem">
					<view class="color5E xjs-size-24">待结算</view>
					<view class="xjs-weight-bold">{{ detail.dataInfo.pendingSettlem || 0 }}</view>
				</view>
				<view class="boxItem">
					<view class="color5E xjs-size-24">已结算</view>
					<view class="xjs-weight-bold">{{ detail.dataInfo.settle || 0 }}</view>
				</view>
				<view class="boxItem">
					<!-- <view class="mt24">已提现</view>
					<view class="xjs-weight-bold">{{detail.dataInfo.totalBalance || 0}}</view> -->
				</view>
			</view>
			<view class="boxWrapMoneyBottom" @tap="personalBalance">
				<view class="boxItem">
					<view class="color5E xjs-size-24">待提现</view>
					<view class="xjs-weight-bold">{{ detail.dataInfo.pendingWithdrawal || 0 }}</view>
				</view>
				<view class="boxItem">
					<view class="color5E xjs-size-24">提现中</view>
					<view class="xjs-weight-bold">{{ detail.dataInfo.withdrawBalance || 0 }}</view>
				</view>
				<view class="boxItem">
					<view class="color5E xjs-size-24">已提现</view>
					<view class="xjs-weight-bold">{{ detail.dataInfo.totalBalance || 0 }}</view>
				</view>
			</view>
		</view>
		<view class="box mt24" v-if="detail.info.status == 1">
			<view class="title">服务订单</view>
			<view class="boxWrap">
				<view class="boxItem">
					<view class="color5E xjs-size-24">待服务订单数</view>
					<view class="xjs-mt-16 xjs-weight-bold">{{ detail.dataInfo.waitingService || 0 }}</view>
				</view>
				<view class="boxItem">
					<view class="color5E xjs-size-24">服务中订单数</view>
					<view class="xjs-mt-16 xjs-weight-bold">{{ detail.dataInfo.inService || 0 }}</view>
				</view>
				<view class="boxItem">
					<view class="color5E xjs-size-24">已服务订单数</view>
					<view class="xjs-mt-16 xjs-weight-bold">{{ detail.dataInfo.serviceSuccess || 0 }}</view>
				</view>
			</view>
		</view>
		<view class="box mt24">
			<view class="title">
				<view>当前累计消费情况</view>
				<view class="nowTime" v-if="detail.userConsumptionTotal.orderTime">最近下单时间：{{ detail.userConsumptionTotal.orderTime }}</view>
			</view>
			<view class="lf xjs-pt-40 xjs-pb-40 justify-between">
				<view class="">
					<view class="color5E xjs-size-24">商城订单数</view>
					<view class="xjs-mt-16 xjs-weight-bold">{{ detail.userConsumptionTotal.mallOrderNum || 0 }}</view>
				</view>
				<view>
					<view class="color5E xjs-size-24">商城消费金额</view>
					<view class="xjs-mt-16 xjs-weight-bold">{{ detail.userConsumptionTotal.mallOrderAmount || 0 }}</view>
				</view>
				<view>
					<view class="color5E xjs-size-24">服务订单数</view>
					<view class="xjs-mt-16 xjs-weight-bold">{{ detail.userConsumptionTotal.serviceOrderNum || 0 }}</view>
				</view>
				<view class="">
					<view class="color5E xjs-size-24">服务消费金额</view>
					<view class="xjs-mt-16 xjs-weight-bold">{{ detail.userConsumptionTotal.serviceOrderAmount || 0 }}</view>
				</view>
			</view>
		</view>
		<view class="box mt24">
			<view class="title">加入时间</view>
			<view class="common">
				<view class="boxWrap timeBox">
					<view class="timeW">注册时间：</view>
					<view class="xjs-weight-bold">{{ detail.dataInfo.createTime }}</view>
				</view>
				<view class="boxWrap timeBox" v-if="detail.info.status == 1">
					<view class="timeW">成为陪宠师时间：</view>
					<view class="xjs-weight-bold">{{ detail.dataInfo.joinTeamTime }}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
import { onLoad } from "@dcloudio/uni-app";
import { reactive, onMounted, ref } from "vue";
import api from "@/api";
import BigNumber from "bignumber.js";

const textareaVal = ref("");
const studioId = ref("");
onLoad((option) => {
	console.log(option);
	detail.info = option;
});

const detail = reactive<{
	info: any;
	dataInfo: any;
	studioBalanceNew: any;
	revenueSharing: any;
	userConsumptionTotal: any;
}>({
	info: {},
	dataInfo: {},
	studioBalanceNew: {},
	revenueSharing: {},
	userConsumptionTotal: {}
});

const filterPetService = (type) => {
	if (type == 1) {
		return "上门喂养";
	} else if (type == 2) {
		return "上门遛狗";
	} else if (type == 3) {
		return "基础清洁";
	}
};
const handleIncome = (proportion: any) => {
	if (proportion) {
		return new BigNumber(100).times(proportion).toNumber();
	} else {
		return 0;
	}
};
// 获取工作室信息
const getStudioInfo = async () => {
	const { data } = await api({
		method: "get",
		url: `/mall/studio/myStudio`
	});
	studioId.value = data.studio.id;
};

const filterServiceType = () => {
	return detail.dataInfo.serviceType.split(",");
};

const toPetHomeUrl = () => {
	uni.navigateTo({
		url: `/pages/studio/petCompanionTeacherIndex/index?studioId=${studioId.value}&userId=${detail.dataInfo.userId}`
	});
};
const personalIncomeStatement = () => {
	uni.navigateTo({
		url: `/pages/income/personalIncomeStatement/index?studioId=${studioId.value}&userId=${detail.dataInfo.userId}`
	});
};
const personalBalance = () => {
	uni.navigateTo({
		url: `/pages/income/personalBalance/index?userId=${detail.dataInfo.userId}`
	});
};
// const personRevenueOrders = () => {
// 	uni.navigateTo({
// 	  url: `/pages/income/personRevenueOrders/index?studioId=${studioId.value}&userId=${detail.dataInfo.userId}`,
// 	})
// }
const incomeSetUp = () => {
	uni.navigateTo({
		url: `/pages/studioManage/incomeSetUp/index?type=2&studioId=${studioId.value}&userId=${detail.dataInfo.userId}`
	});
};
const handleConfig = async () => {
	// if(textareaVal.value.length > 50){
	// 	uni.showToast({
	// 		title: '最多50个字',
	// 		icon: 'none'
	// 	});
	// 	return false
	// }
	let data =
		detail.info.status == 2
			? {
					remark: "",
					notesUserId: detail.dataInfo.id
			  }
			: {
					remark: "",
					joinedStudioId: studioId.value,
					id: detail.info.petsitterId
			  };
	const res = await api({
		method: "put",
		url: detail.info.status == 2 ? `/mall/studio/petsitter-team/updateUserRemark` : `/mall/studio/petsitter-team/updateRemark`,
		data: data
	});

	if (res.code !== 0) {
		uni.showToast({
			icon: "none",
			mask: true,
			title: res.msg
		});
		return false;
	} else {
		uni.showToast({
			icon: "none",
			mask: true,
			title: "修改成功"
		});
		if (detail.info.status == 2) {
			await getUserInfo();
		} else {
			await getInfo();
		}
	}
};

onMounted(async () => {
	await getStudioInfo();
	if (detail.info.status == 2) {
		await getUserInfo(); //用户
	} else {
		await getInfo(); //陪宠师
	}
	await getUserConsumptionTotal();
	await getRevenueSharing();
});

const getRevenueSharing = async () => {
	const res = await api({
		method: "get",
		url: `/mall/studio/petsitter-team/getRevenueSharing`,
		data: {
			userId: detail.info.userId,
			studioId: studioId.value
		}
	});
	detail.revenueSharing = res.data;
};
const getUserConsumptionTotal = async () => {
	const res = await api({
		method: "get",
		url: `/mall/user/getUserConsumptionTotal/${detail.info.userId}`
	});
	detail.userConsumptionTotal = res.data;
};

const getUserInfo = async () => {
	const res = await api({
		method: "get",
		url: `/mall/studio/petsitter-team/getTeamUserInfoV1`,
		data: {
			userId: detail.info.userId,
			// userId:'140508133',
			studioId: studioId.value
		}
	});
	detail.dataInfo = res.data;
	detail.studioBalanceNew = res.data.studioBalance || {};
};

const getInfo = async () => {
	const res = await api({
		method: "get",
		url: `/mall/studio/petsitter-team/getTeamUserInfo`,
		data: {
			petsitterId: detail.info.petsitterId,
			studioId: studioId.value
		}
	});
	detail.dataInfo = res.data;
	detail.studioBalanceNew = res.data.studioBalanceNew;
};

const copy = (type) => {
	uni.setClipboardData({
		data: type == "phone" ? detail.dataInfo.phone : detail.dataInfo.wxNumber,
		success: function () {
			uni.showToast({
				title: "复制成功",
				icon: "none"
			});
		}
	});
};
</script>

<style lang="scss" scoped>
.linehei1 {
	line-height: 1;
}

.lf {
	display: flex;
}

.justify-between {
	justify-content: space-between;
}

.timeBox {
	&:last-child {
		margin-top: 10rpx;
	}
}

.color5E {
	color: #5c5e5e;
}

.timeW {
	width: 240rpx;
}

.titleFlex {
	display: flex;
	justify-content: space-between;
	align-items: self-end;

	.text {
		font-size: 28rpx;
		color: #5c5e5e;
	}
}

.nowTime {
	font-size: 28rpx;
	color: #5c5e5e;
	margin-top: 16rpx;
}

.boxFlex {
	display: flex;
	align-items: center;
	justify-content: space-around;
	padding-bottom: 32rpx;

	view {
		// flex:1;
		color: #5c5e5e;
		font-size: 28rpx;
		text-align: center;
	}
}

.teamDetails {
	width: 100%;
	// height: 100%;
	background-color: #f9f6f6;
	padding: 32rpx 32rpx 110rpx;
	box-sizing: border-box;

	.mt24 {
		margin-top: 24rpx !important;
	}

	.common {
		font-size: 30rpx;
		color: #000;
		padding: 32rpx 0 40rpx;
		word-wrap: break-word;
		word-break: break-all;
	}

	.headerInfo {
		width: 100%;
		padding: 32rpx;
		box-sizing: border-box;
		background-color: #fff;
		border-radius: 24rpx 24rpx 24rpx 24rpx;

		.referee {
			display: flex;
			align-items: center;
			color: #5c5e5e;
			font-size: 28rpx;
			margin-bottom: 24rpx;

			image {
				width: 44rpx;
				height: 44rpx;
				border-radius: 50%;
				margin-right: 10rpx;
			}

			.option {
				position: relative;
				margin-right: 20rpx;

				&:last-child {
					margin-right: 0;

					&::after {
						content: none;
					}
				}

				&::after {
					content: "";
					position: absolute;
					right: -10rpx;
					transform: translateY(-50%);
					top: 50%;
					height: 26rpx;
					width: 1rpx;
					background-color: #5c5e5e;
				}
			}
		}

		.info {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 32rpx;

			.userInfo {
				display: flex;
				align-items: center;
				width: 100%;

				.imageWrap {
					position: relative;

					image {
						width: 160rpx;
						height: 160rpx;
						border-radius: 50%;
					}

					.identityDetail {
						position: absolute;
						bottom: 0;
						left: 50%;
						transform: translateX(-50%);
						font-size: 24rpx;
						color: #fff;
						background: linear-gradient(90deg, #ffa6bc 0%, #ffa3a3 100%);
						border-radius: 40rpx 40rpx 40rpx 40rpx;
						width: 96rpx;
						line-height: 40rpx;
						text-align: center;
					}
				}

				.detailWrap {
					margin-left: 16rpx;
					width: calc(100% - 160rpx - 16rpx);

					.userId {
						font-size: 26rpx;
						color: #1b2120;
						margin-top: 10rpx;
					}

					.identity {
						display: flex;
						justify-content: space-between;
						align-items: center;

						.identityName {
							display: flex;
							align-items: flex-end;

							.name {
								font-weight: bold;
								font-size: 40rpx;
								color: #1b2120;
								margin-right: 8rpx;
							}

							.age {
								font-size: 24rpx;
								color: #5c5e5e;
							}
						}

						.page {
							font-size: 26rpx;
							color: #ff6084;
							display: flex;
							align-items: center;
						}
					}

					.m34 {
						margin: 34rpx 0 20rpx;
					}

					.commonItem {
						display: flex;
						justify-content: space-between;
						align-items: center;

						.commonLabel {
							display: flex;
							align-items: center;

							image {
								width: 32rpx;
								height: 32rpx;
							}

							.text {
								font-size: 28rpx;
								color: #5c5e5e;
								margin-left: 8rpx;
							}
						}

						.copy {
							font-size: 26rpx;
							color: #ff6084;
							text-decoration: underline;
						}
					}

					.nickName {
						font-size: 28rpx;
						color: #5c5e5e;
						margin-top: 24rpx;
					}
				}
			}
		}
	}

	.service {
		padding: 32rpx 24rpx;
		box-sizing: border-box;
		background-color: #f8f8f8;
		border-radius: 24rpx;

		.serviceItem {
			display: flex;
			// align-items: center;
			font-size: 26rpx;
			margin-bottom: 32rpx;

			&:last-child {
				margin-bottom: 0;
			}

			.serviceLabel {
				color: #7c807f;
				font-weight: bold;
				width: 132rpx;
			}

			.serviceVal {
				color: #5c5e5e;
				width: calc(100% - 132rpx);
			}
		}

		.serviceOption {
			position: relative;
			margin-right: 16rpx;

			&:last-child {
				margin-right: 0;

				&::after {
					content: none;
				}
			}

			&::after {
				content: "";
				position: absolute;
				right: -8rpx;
				transform: translateY(-50%);
				top: 50%;
				height: 24rpx;
				width: 1rpx;
				background-color: #cacccc;
			}
		}
	}

	.boxWrapMoneyTop {
		display: flex;

		.boxItem {
			flex: 1;
			font-size: 30rpx;
			padding: 38rpx 0 34rpx 0;
		}
	}

	.boxWrapMoneyBottom {
		display: flex;

		.boxItem {
			flex: 1;
			font-size: 30rpx;
			padding-bottom: 40rpx;
		}
	}

	.box {
		background-color: #fff;
		padding: 0 32rpx;
		box-sizing: border-box;
		border-radius: 24rpx 24rpx 24rpx 24rpx;

		.title {
			font-size: 36rpx;
			color: #1b2120;
			font-weight: bold;
			border-bottom: 1rpx solid #e4e6e6;
			padding: 40rpx 0 24rpx;
			box-sizing: border-box;
		}

		.mall_box {
			background-color: #ffe6ec;
			width: 200rpx;
			height: 180rpx;
			border-radius: 24rpx;
			margin: 40rpx 0;
		}

		.service_box {
			background-color: #f1eeff;
			width: 200rpx;
			height: 180rpx;
			border-radius: 24rpx;
			margin: 40rpx 0;
		}

		.mlr-11 {
			margin-left: 11rpx;
			margin-right: 11rpx;
		}

		.ml-22 {
			margin-left: 22rpx;
		}

		.color_text {
			color: #5c5e5e;
			font-size: 26rpx;
		}

		.boxWrap {
			display: flex;

			.boxItem {
				flex: 1;
				padding: 40rpx 0;
			}
		}
	}
}

.unbind_pop {
	width: 622rpx;
	background: #ffffff;
	border-radius: 24rpx;
	padding: 64rpx 40rpx;
	box-sizing: border-box;
	text-align: center;

	.pop_title {
		font-weight: 500;
		font-size: 40rpx;
		color: #1b2120;
	}

	.unbind_text {
		margin-top: 48rpx;
		font-size: 30rpx;
		color: #1b2120;
		background-color: #f8f8f8;
		text-align: left;
		width: 100%;
		padding: 32rpx;
		box-sizing: border-box;
	}

	.pop_footer_btn {
		display: flex;
		justify-content: space-between;
		margin-top: 48rpx;

		.cancel_btn {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 263rpx;
			height: 88rpx;
			background-color: #ffffff;
			border-radius: 44rpx;
			border: 2rpx solid #ff6084;
			font-weight: 400;
			font-size: 28rpx;
			color: #ff6084;
		}

		.confirm_btn {
			width: 263rpx;
			height: 88rpx;
		}
	}
}
</style>
